import React, { memo, useEffect, useState } from 'react'
import { HeaderRightWrapper } from './style'
import IconInternet from '@/assets/svg/icon_internet'
import IconMenu from '@/assets/svg/icon_menu'
import IconUser from '@/assets/svg/icon_user'

const HeaderRight = memo(() => {
  const [showPop, setShowPop] = useState(false)

  // 副作用代码
  useEffect(() => {
    function windowHandleClick () {
      setShowPop(false)
    }
    window.addEventListener('click', windowHandleClick, true)
    return () => {
      window.removeEventListener('click', windowHandleClick, true)
    }
  }, [])

  function profileHandleClick () {
    setShowPop(!showPop)
  }

  return (
    <HeaderRightWrapper>
      <div className="btns">
        <div className="btn">登录</div>
        <div className="btn">注册</div>
        <div className="btn">
          <IconInternet />
        </div>
      </div>
      <div className="profile" onClick={e => profileHandleClick()}>
        <IconMenu />
        <IconUser />

        {showPop && (
          <div className="pop-up-box">
            <div className="top">
              <div className="item register">注册</div>
              <div className="item login">登录</div>
            </div>
            <div className="bottom">
              <div className="item">出租房源</div>
              <div className="item">开展体验</div>
              <div className="item">帮助</div>
            </div>
          </div>
        ) }
      </div>
    </HeaderRightWrapper>
  )
})

export default HeaderRight